#@layout()

#define script()
<script>

    var switcheries = {};
    var elems = Array.prototype.slice.call(document.querySelectorAll('.myswitchery'));
    elems.forEach(function (elem) {
        var switchery = new Switchery(elem, {size: 'small'});
        switcheries[elem.getAttribute('id')] = switchery;
    });



    //隐藏没有权限的 权限组
    $('.form-header').each(function () {
        var group = $(this);
        $(this).next().each(function () {
                if ($(this).children().length == 0) {
                    $(this).hide();
                    group.hide();
                }
            }
        )
    });



</script>
#end

#define css()
<style>
    .per-item {
        display: flex;
        /*justify-content: center;*/
        margin: 7px 0;
    }

    .per-item > .myswitchery {
        margin-top: 0px;
        margin-right: 5px;
    }

    .switchery-small {
        margin-top: 0;
        margin-right: 5px;
    }

    .form-header {
        padding-bottom: 9px;
        padding-left: 0px;
        margin: 50px 0 15px;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        font-weight: bold;
    }
</style>
#end

#define content()
<section class="content-header">

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">

                <div class="row mb-2">
                    <div class="col-sm-12">
                        <h1>
                            用户权限管理
                            <small data-toggle="tooltip" title="用户权限管理" data-placement="bottom"
                                   data-trigger="hover"><i class="nav-icon far fa-question-circle"></i></small>
                            <small> 首页 / 用户 / 用户权限管理</small>
                        </h1>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- /.container-fluid -->
</section>


<section class="content">

    <div class="container-fluid">
        <div class="card card-outline card-primary">

            <div class="card-header  ">
                <div class="container-fluid">
                    <h2 class="form-header">
                        <i class="fa fa-globe"></i>
                        #(user.nickname ??) 的权限列表
                    </h2>
                </div>

                <div class="col-12" style="margin-left: 15px">
                    <div class="btn-group">
                        <a class="btn btn-default #if(type == 1)btn-outline-primary active#end"
                           href="#(CPATH)/admin/user/permissions/#(user.id)?type=1">菜单权限</a>
                        <a class="btn btn-default #if(type == 2)btn-outline-primary active#end"
                           href="#(CPATH)/admin/user/permissions/#(user.id)?type=2">功能权限</a>
                        <a class="btn btn-default #if(type == 3)btn-outline-primary active#end"
                           href="#(CPATH)/admin/user/permissions/#(user.id)?type=3">逻辑权限</a>
                        <a class="btn btn-default #if(type == 4)btn-outline-primary active#end"
                           href="#(CPATH)/admin/user/permissions/#(user.id)?type=4">敏感数据权限</a>

                    </div>
                </div>
                <!-- /.col -->
            </div>


            <!-- /.card-header -->

            <div class="card-body">

                #for(group : groups)
                <h4 class="form-header">
                    #(group.showName ??)
                </h4>

                <div class="form-group row">
                    #for(permission : group.permissions)
                    <div class="col-sm-3 per-item">
                        <input class="myswitchery" type="checkbox" readonly id="#(permission.id)"
                               #checkedIf(hasPermission(user,permission.id))>
                        #(for.count). #(permission.showName ??)
                    </div>
                    #end
                </div>
                #end

            </div><!-- /.card-body -->
        </div>

    </div>

</section>

#end
